<template>
  <div>
    <el-upload
      v-bind="{ ...item }"
      :accept="(item?.accept || []).join(',')"
      :action="item?.action"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="uploadSuccess"
      :on-exceed="handleExceed"
      :on-error="handleError"
    >
      <el-button
        icon="ele-Upload"
        size="default"
      >
        {{ item?.config.buttonText }}
      </el-button>
      <template #tip>
        <div
          v-if="item?.config.showTip"
          class="el-upload__tip"
        >
          只能上传不超过 {{ item.config.fileSize }}{{ item.config.sizeUnit }}的{{
            (item.accept || []).join(",")
          }}文件,最多不超过{{ item.limit }}个文件
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script setup name="TUpload" lang="ts">
import { formEmits, formItemProps } from "../hooks/useFormItemHook";
import { useUploadHook } from "@/views/formgen/components/FormItem/hooks/useUploadHook";

const props = defineProps({
  ...formItemProps
});

const emits = defineEmits(formEmits);

const { fileList, beforeUpload, handleRemove, handleExceed, uploadSuccess, handleError } = useUploadHook(props, emits);

const handlePreview = (file: any) => {
  console.log(file);
  window.open(file.url || file.response.data);
};
</script>
